<template>
    <div class="personBrowser" style="width: 100%">
        <el-row>

            <el-col :span="9">
                <el-form class="addForm"
                         :ref="addForm"
                         :model="person" :rules="rules">

                    <el-form-item prop="name" class="formItem">
                        <el-input v-model.trim="person.name">
                            <template slot="prepend">姓名:</template>
                        </el-input>
                    </el-form-item>


                    <el-form-item prop="age" class="formItem">年龄：
                        <el-input-number v-model="person.age">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item prop="male" class="formItem">性别：
                        <el-radio border="" v-model="person.male" :label="true">男
                        </el-radio>
                        <el-radio border="" v-model="person.male" :label="false">女
                        </el-radio>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-edit"
                                   @click="add">提交表单
                        </el-button>
                        <el-button type="warning" icon="el-icon-remove"
                                   @click="()=>$refs[addForm].resetFields()">重置
                        </el-button>
                    </el-form-item>
                </el-form>

            </el-col>
            <el-col :span="15" style="padding-top: 10px">

                <el-table class="browserTable" :data="persons" :stripe="true">
                    <el-table-column prop="personId" label="流水号"></el-table-column>
                    <el-table-column prop="name" label="昵称"></el-table-column>
                    <el-table-column prop="age" label="年龄"></el-table-column>
                    <el-table-column prop="male" label="性别" :formatter="tableMaleColumn"></el-table-column>
                    <el-table-column label="操作" width="200" fixed="left">
                        <template slot-scope="props">
                            <el-button-group>
                                <el-button type="primary" icon="el-icon-edit"
                                           @click="update(props.row.personId)">编辑
                                </el-button>
                                <el-button type="warning" icon="el-icon-delete">删除
                                </el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>


            </el-col>

        </el-row>
    </div>
</template>

<script>

    export default {

        name: "PersonBrowser",
        components: {
            // New,Old,
        },
        props: {
            sampleP: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                sampleD: 'value',
                addForm: 'addFrom',
                person: {
                    personId: 0,
                    name: 'zhangsan',
                    age: 19,
                    male: true,
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名字', trigger: 'blur'},
                    ],
                    age: [
                        {required: true, message: '请选择年龄', trigger: 'blur'},
                    ],
                },
                persons: [
                    {
                        personId: 2,
                        name: 'lisi',
                        age: 49,
                        male: true,
                    },
                    {
                        personId: 5,
                        name: 'wangwu',
                        age: 23,
                        male: false,
                    },
                ],
                queryCondition: {
                    pageSize: 10,
                    pageNum: 1,
                }

            }
        },
        computed: {
            // sampleC() {
            //     return this.sampleD+'--';
            // }
        },
        created() {
        },
        mounted() {
            this.queryCondition.pageNum=1;
            this.queryPersons();
        },
        methods: {
            sampleM() {

            },

            add() {
                this.$notify({
                    title: '系统提示：',
                    message: JSON.stringify(this.person)
                });

                let url = "/person";
                this.$refs[this.addForm].validate((valid) => {
                    // this.$message.warning(JSON.stringify("hi" + this.user.username+this.user.password));
                    if (valid) {
                        this.$http({
                            method: 'post',
                            url: url,
                            data: this.person,
                            headers: {
                                'Content-Type': 'application/json'
                            },
                        }).then(res => {

                            this.$message.warning("保存成功；　" + JSON.stringify(res.data));
                            this.person = res.data;

                        }).catch(res => console.log(JSON.stringify(res)));
                    } else {
                        this.$message.warning(JSON.stringify("validate mistake"))
                    }
                });

            },
            update(id) {
                this.$message.warning("开发中。。。" + id)
            },
            tableMaleColumn(row, column, cell) {
                return cell ? "男" : "女"
            },
            queryPersons() {
                this.$http({
                    method: 'post',
                    url: '/queryPersons',
                    data: this.queryCondition,
                }).then(res => {
                    this.persons = res.data;
                    //this.total = res.data.total;
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });

            }

        },
        watch: {
            // sampleC(newValue, oldValue) {
            //
            // }
        },
    }
</script>

<style scoped>
    /*<style lang='scss' scoped>*/
    .personBrowser {
        background-color: rgba(255, 68, 8, 0.72);
    }

    .addForm {
        background-color: gray;
        width: 80%;
        margin: 0 auto;
        border-radius: 10px;

    }

    .formItem {
        margin: 5px auto;
        padding: 10px;
    }

    .browserTable {
        background-color: #8f82b3;
        width: 95%;
        margin: 0 auto;
        border-radius: 10px;

    }
</style>